<template>
	<view>
		<template v-for="(item,index) in initForm['attributes']" :key="index">
			<Radio :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]"
				v-if="item.attrName=='radio'" />
			<Swiper :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]"
				v-if="item.attrName=='swiper'" />
			<Grid :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]" v-if="item.attrName=='grid'" />
			<WaterFall :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]"
				v-if="item.attrName=='waterFall'"></WaterFall>
			<List :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]" v-if="item.attrName=='list'">
			</List>
			<Album :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]" v-if="item.attrName=='album'">
			</Album>
			<Tabs :initValue="initForm[item.attrName]" :value="dataForm[item.attrName]" v-if="item.attrName=='tabs'">
			</Tabs>
		</template>
		<BackTop></BackTop>
	</view>
</template>
<script setup>
	import Swiper from '@/components/ui/Swiper.vue'
	import Grid from '@/components/ui/Grid.vue'
	import Radio from '@/components/ui/Radio.vue'
	import WaterFall from '@/components/ui/WaterFall.vue'
	import List from '@/components/ui/List.vue'
	import Album from '@/components/ui/Album.vue'
	import Tabs from '@/components/ui/Tabs.vue'
	import BackTop from '@/components/ui/BackTop.vue'
	import {
		getCurrentInstance,
		reactive,
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import functionList from '@/utils/functionUtil';

	const dataForm = reactive({}) //业务数据表单
	const initForm = reactive({}) //初始数据表单

	const props = defineProps({
		templateId: {
			type: String,
			default: 0
		}
	})

	const init = () => {
		const templateId = props.templateId ? props.templateId : getCurrentInstance().type.templateId

		templateJson.forEach(item => {
			if (templateId === item.id) {
				if (item.attributes) {
					initForm['attributes'] = item.attributes
					item.attributes.forEach(t => {
						if (t.initMethod.indexOf("init") == 0) {
							functionList[t.initMethod](dataForm, initForm, t)
						}
					})
				}
			}
		})

	}

	onMounted(async () => {
		init()
	})


	const templateJson = reactive([{
		id: "0",
		name: '主页',
		attributes: [{
				type: 'swiper',
				title: '轮播图',
				attrName: 'swiper',
				show: true,
				initMethod: 'initSwiper',
				initValue: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}, {
				type: 'grid',
				title: '宫格',
				attrName: 'grid',
				initMethod: 'initGrid',
				show: true,
				initValue: [{
						name: 'photo',
						title: '图片1'
					},
					{
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					}, {
						name: 'lock',
						title: '锁头'
					},
					{
						name: 'star',
						title: '星星'
					}, {
						name: 'star',
						title: '星星'
					},
				]
			}, {
				type: 'radio',
				title: '单选',
				attrName: 'radio',
				show: true,
				defaultValue: 0,
				initMethod: 'initRadio',
				initValue: [{
					label: '女',
					value: 0
				}, {
					label: '男',
					value: 1
				}, {
					label: '中',
					value: 2
				}]
			},

			{
				type: 'waterFall',
				title: '瀑布流',
				attrName: 'waterFall',
				show: true,
				initMethod: 'initWatterfall',
				initValue: [{
						price: 924,
						title: '只识弯弓射大雕',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					},
				]
			},
			{
				type: 'list',
				title: '列表',
				attrName: 'list',
				show: true,
				initMethod: 'initList',
				initValue: [{
						title: '只识弯弓射大雕',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					},
					{
						title: '只识弯弓射大雕',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					},
					{
						title: '只识弯弓射大雕',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					},
					{
						title: '只识弯弓射大雕',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					}, {
						title: '只识弯弓射大雕',
						image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					},
				]
			},
			{
				type: 'tabs',
				title: '标签',
				attrName: 'tabs',
				show: true,
				initMethod: 'initTabs',
				initValue: [{
						id: '01',
						name: '关注'
					},
					{
						id: '02',
						name: '推荐'
					},
					{
						id: '03',
						name: '电影'
					},
					{
						id: '04',
						name: '科技'
					},
					{
						id: '05',
						name: '音乐'
					},
					{
						id: '06',
						name: '美食'
					},
					{
						id: '07',
						name: '文化'
					},
					{
						id: '08',
						name: '财经'
					},
					{
						id: '09',
						name: '手工'
					}
				]
			},
			{
				type: 'album',
				title: '相册',
				attrName: 'album',
				show: true,
				initMethod: 'initAlbum',
				initValue: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				]
			},

		]
	}, {
		id: "1",
		name: '管理',
		attributes: [{
				type: 'swiper',
				title: '轮播图',
				attrName: 'swiper',
				show: true,
				initMethod: 'initSwiper',
				initValue: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			},
			{
				type: 'radio',
				title: '单选',
				attrName: 'radio',
				show: true,
				defaultValue: 1,
				initMethod: 'initRadio',
				initValue: [{
					label: '女',
					value: 0
				}, {
					label: '男',
					value: 1
				}, {
					label: '中',
					value: 2
				}]
			}
		]
	}, {
		id: "2",
		name: '首页',
		attributes: [{
			type: 'swiper',
			title: '轮播图',
			attrName: 'swiper',
			show: true,
			initMethod: 'initSwiper',
			initValue: [
				'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				'https://cdn.uviewui.com/uview/swiper/swiper3.png',
			]
		}, {
			type: 'grid',
			title: '宫格',
			attrName: 'grid',
			show: true,
			initMethod: 'initGrid',
			initValue: [{
					name: 'photo',
					title: '图片'
				},
				{
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				}, {
					name: 'lock',
					title: '锁头'
				},
				{
					name: 'star',
					title: '星星'
				}, {
					name: 'star',
					title: '星星'
				},
			]
		}]
	}])


	// 	// 创建对子组件的引用  
	// 	const uToastRef = ref(null);
</script>

<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}

	
</style>